<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Netty聊天室</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #chatArea {
            border: 1px solid #ccc;
            height: 400px;
            overflow-y: scroll;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
        }
        #messageInput {
            width: 70%;
            padding: 10px;
        }
        #sendButton {
            width: 25%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        .message {
            margin: 5px 0;
            padding: 5px;
            border-radius: 3px;
        }
        .system-message {
            color: #888;
            font-style: italic;
        }
        .user-message {
            background-color: #e3f2fd;
        }
        .my-message {
            background-color: #e8f5e9;
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>Netty聊天室</h1>
    <div id="chatArea"></div>
    <div>
        <input type="text" id="messageInput" placeholder="输入消息..." />
        <button id="sendButton">发送</button>
    </div>

    <script th:inline="javascript">
        let socket = new WebSocket("ws://localhost:8080/ws");
        let chatArea = document.getElementById("chatArea");
        let messageInput = document.getElementById("messageInput");
        let sendButton = document.getElementById("sendButton");

        socket.onopen = function(event) {
            appendMessage("系统", "已连接到聊天服务器", "system-message");
        };

        socket.onmessage = function(event) {
            try {
                let data = JSON.parse(event.data);
                if (data.type === "system") {
                    appendMessage("系统", data.message, "system-message");
                } else if (data.type === "chat") {
                    appendMessage(data.user, data.message, "user-message");
                }
            } catch (e) {
                appendMessage("系统", event.data, "system-message");
            }
        };

        socket.onclose = function(event) {
            appendMessage("系统", "与服务器的连接已断开", "system-message");
        };

        socket.onerror = function(error) {
            appendMessage("错误", "连接发生错误: " + error, "system-message");
        };

        sendButton.onclick = function() {
            let message = messageInput.value.trim();
            if (message) {
                socket.send(message);
                messageInput.value = "";
            }
        };

        messageInput.addEventListener("keypress", function(event) {
            if (event.key === "Enter") {
                sendButton.click();
            }
        });

        function appendMessage(user, message, cssClass) {
            let messageElement = document.createElement("div");
            messageElement.className = "message " + cssClass;
            
            let time = new Date().toLocaleTimeString();
            messageElement.innerHTML = `<strong>[${time}] ${user}:</strong> ${message}`;
            
            chatArea.appendChild(messageElement);
            chatArea.scrollTop = chatArea.scrollHeight;
        }
    </script>
</body>
</html>